<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /**{
            margin: 0;
            padding: 0;
        }*/
        .box {
            width: 500px;
            /*1.角度  颜色*/
            background: linear-gradient(-45deg, lightseagreen, lightpink, lightblue, lightyellow, lightcoral);
            background: -webkit-linear-gradient(-45deg, lightseagreen, lightpink, lightblue, lightyellow, lightcoral);
        }

        .box span {
            display: block;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
        }

        .box span.close:before {
            content: "+";
            font-size: 20px;
            font-weight: bold;
            color: red;
        }

        .box span.open:before {
            content: "-";
            font-size: 30px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>
    <ul class="box" id="box">
        <li><span>第一级菜单</span>
            <ul>
                <li><span>第二级菜单</span>
                    <ul>
                        <li><span>第三级菜单</span>
                            <ul>
                                <li><span>第四级菜单</span></li>
                                <li><span>第四级菜单</span></li>
                            </ul>
                        </li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                    </ul>
                </li>
                <li><span>第二级菜单</span>
                    <ul>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                        <li><span>第三级菜单</span></li>
                    </ul>

                </li>
                <li><span>第二级菜单</span>
                </li>
                <li><span>第二级菜单</span></li>
            </ul>
        </li>
        <li><span>第一级菜单</span></li>
        <li><span>第一级菜单</span></li>
        <li><span>第一级菜单</span></li>
    </ul>
    <script>

        /* 
        1、获取所有的span标签
        2、循环所有的span标签，判断当前span标签有没有兄弟元素：
            1、如果有：
                1、给这个span加一个close的类名，让其显示加号
                2、把兄弟元素隐藏
            2、如果没有：
                1、给这个span加一个open的类名，让其显示减号
        

        3、给box大盒子绑定点击事件，利用事件委托一会让其执行
            1、判断当前点击的span有没有兄弟元素，如果有那就证明他可以打开显示更多菜单和关闭菜单
                1、在判断当前span的类名是啥
                    1、如果是close证明当前是关闭的，那就让span的兄弟元素显示并把span的类名改为open
                    2、否则就是关闭菜单：把span的类名改为close，在把当前span的兄弟元素ul和ul里的ul全部改为隐藏
         */
    </script>
</body>

</html>